<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: greenyellow;
    }
    div{
        
        margin-top: 20%;
        text-align: center;
        font-family: "微软雅黑";
        color:skyblue;
        text-shadow: 2px 2px #000;
        animation: yanse 5s 3 linear;
    }
    h1{
        height: 50px;
        letter-spacing: 30px;
        font-size: 50px;
        
    }
    span{
        /* animation: yanse 4s linear; */
        font-size: 50px;
        letter-spacing: 20px;
    }
    @keyframes yanse {
        0%{
            color: rgb(107, 228, 147);
        }
        40%{
            color: rgb(108, 227, 23);
        }
        50%{
            color: yellow;
        }
        80%{
            color: rgb(15, 151, 248);
        }
        100%{
            color: rgb(23, 222, 248);
        }

    }

</style>
<body>
    <div>
        <h1>距离国庆还有</h1>
        <span id="day"></span>
    </div>

    <script>
        // let day=document.querySelector("#day");
        // console.log(day);
        // day.innerText=111;//day.innerText:向元素添加内容
        function downtime(){
            let a='2022-10-1 00:00:00';
            let s=new Date(a).getTime();
            let timedate=new Date().getTime();
            let start=s-timedate;
            let day =Math.floor(start/(1000*3600*24));
            let shi =Math.floor(start/(1000*3600)%24);
            let fen =Math.floor(start/(1000*30)%60);
            let m =Math.floor(start/(1000)%60);
            return day+"天"+shi+"时"+":"+fen+"分"+m+"秒";
            
        }

        setInterval(function() {
            document.getElementById('day').innerText=downtime();
        }, 1000);
        
    </script>
</body>
</html>